import shandong from "./shandong.json";
import { ref } from "vue";
import * as echarts from "echarts";
import type { GeoJSON } from "echarts/types/src/coord/geo/geoTypes.d.ts";
import iconVppUser from "@/views/map/demo2/icon-vpp-user.png";
import { getHomeFirstRowValue, getHomeVppUserList } from "@/api/home";
echarts.registerMap("山东省", shandong as GeoJSON);
const title = "链合自主调度型虚拟电厂";
const colors = ["#44a9eb", "#44ebea", "#efbb65", "#e27878"];
export function useChartsData() {
  const oneOptions = ref({
    color: colors,
    dataZoom: [
      {
        show: true,
        type: "inside",
        start: 90,
        end: 100
      }
    ],
    grid: {
      top: 30,
      bottom: 25
      // left: 40,
      // bottom: 40,
      // right: 20
    },
    tooltip: {
      show: true,
      trigger: "axis"
    },
    legend: {
      show: true,
      top: 20,
      right: 0,
      textStyle: {
        color: "#c2c3c5"
      }
    },
    xAxis: {
      type: "category",
      axisLabel: {
        //x轴文字的配置
        show: true,
        color: "#c2c3c5"
        // interval: 0,//使x轴文字显示全
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#c2c3c5",
          type: "dashed"
        }
      },
      axisTick: {
        show: true,
        lineStyle: {
          color: "#c2c3c5"
        }
      },
      splitLine: {
        show: false,
        interval: (index, value) => {
          if (value.indexOf("00:00:00") > -1) {
            return true;
          } else {
            return false;
          }
        },
        lineStyle: {
          color: "#c2c3c5",
          type: "solid",
          width: 1.3
        }
      },
      boundaryGap: false,
      // data: ["12:00:00", "13:00:00", "14:00:00", "15:00:00"]
      data: Array(24)
        .fill(null)
        .map((_, i) => {
          return `${i > 9 ? i : "0" + i}:00:00`;
        })
    },
    yAxis: {
      type: "value",
      show: true,
      splitLine: {
        show: false,
        lineStyle: {
          color: "#c2c3c5",
          type: "solid",
          width: 1.3
        }
      },
      axisLabel: {
        show: false,
        color: "#c2c3c5"
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#c2c3c5",
          type: "dashed"
        }
      },
      axisTick: {
        show: false,
        lineStyle: {
          color: "#c2c3c5"
        }
      }
    },
    series: [
      {
        name: "调节电量#2F",
        type: "line",
        smooth: true,
        showSymbol: false,
        data: Array(24)
          .fill(null)
          .map(() => Math.random().toFixed(2))
      },
      {
        name: "调节电量#2R",
        type: "line",
        smooth: true,
        showSymbol: false,
        data: Array(24)
          .fill(null)
          .map(() => Math.random().toFixed(2))
      },
      {
        name: "全售电量#2F",
        type: "line",
        smooth: true,
        showSymbol: false,
        data: Array(24)
          .fill(null)
          .map(() => Math.random().toFixed(2))
      },
      {
        name: "全售电量#2R",
        type: "line",
        smooth: true,
        showSymbol: false,
        data: Array(24)
          .fill(null)
          .map(() => Math.random().toFixed(2))
      }
    ]
  });
  const rightTwoOptions = ref({
    color: colors,
    dataZoom: [
      {
        show: true,
        type: "inside",
        start: 90,
        end: 100
      }
    ],
    grid: {
      top: 30,
      // left: 40,
      bottom: 25
      // right: 20
    },
    tooltip: {
      show: true,
      trigger: "axis"
    },
    legend: {
      show: true,
      top: 20,
      right: 0,
      textStyle: {
        color: "#c2c3c5"
      }
    },
    xAxis: {
      type: "category",
      axisLabel: {
        //x轴文字的配置
        show: true,
        color: "#c2c3c5"
        // interval: 0,//使x轴文字显示全
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#c2c3c5",
          type: "dashed"
        }
      },
      axisTick: {
        show: true,
        lineStyle: {
          color: "#c2c3c5"
        }
      },
      splitLine: {
        show: false,
        interval: (index, value) => {
          if (value.indexOf("00:00:00") > -1) {
            return true;
          } else {
            return false;
          }
        },
        lineStyle: {
          color: "#c2c3c5",
          type: "solid",
          width: 1.3
        }
      },
      boundaryGap: false,
      // data: ["12:00:00", "13:00:00", "14:00:00", "15:00:00"]
      data: Array(24)
        .fill(null)
        .map((_, i) => {
          return `${i > 9 ? i : "0" + i}:00:00`;
        })
    },
    yAxis: {
      type: "value",
      show: true,
      splitLine: {
        show: false,
        lineStyle: {
          color: "#c2c3c5",
          type: "solid",
          width: 1.3
        }
      },
      axisLabel: {
        show: false,
        color: "#c2c3c5"
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#c2c3c5",
          type: "dashed"
        }
      },
      axisTick: {
        show: false,
        lineStyle: {
          color: "#c2c3c5"
        }
      }
    },
    series: [
      {
        name: "实时负荷",
        type: "line",
        smooth: true,
        showSymbol: false,
        data: Array(24)
          .fill(null)
          .map(() => Math.random().toFixed(2))
      },
      {
        name: "预测负荷",
        type: "line",
        smooth: true,
        showSymbol: false,
        data: Array(24)
          .fill(null)
          .map(() => Math.random().toFixed(2))
      },
      {
        name: "上调节能力",
        type: "line",
        smooth: true,
        showSymbol: false,
        data: Array(24)
          .fill(null)
          .map(() => Math.random().toFixed(2))
      },
      {
        name: "下调节能力",
        type: "line",
        smooth: true,
        showSymbol: false,
        data: Array(24)
          .fill(null)
          .map(() => Math.random().toFixed(2))
      }
    ]
  });
  const level = ref(0);
  const mapData = ref(
    shandong.features.map(item => {
      return {
        name: item.properties.name,
        value: item.properties.adcode
      };
    })
  );
  let scale = ref(0.6);
  // let points = [
  //   {
  //     name: "有数据的用户",
  //     value: [119.233086, 36.704601]
  //   }
  // ];
  let MapOptions = ref({
    backgroundColor: "rgba(0,0,0,0)",
    // backgroundColor: {
    //   image: null, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
    //   repeat: "no-repeat" // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
    // },
    geo: [
      {
        show: true,
        silent: false,
        map: "山东省",
        aspectScale: 1,
        zoom: scale.value, // 缩放
        zlevel: 0,
        layoutCenter: ["50%", "50%"],
        layoutSize: "180%",
        roam: true,
        label: {
          show: true,
          color: "#fff",
          emphasis: {
            show: true,
            color: "#fff"
          }
        },
        itemStyle: {
          normal: {
            borderColor: "#c0f3fb",
            areaColor: {
              image: null,
              repeat: "repeat"
            }
          }
        },
        emphasis: {
          disabled: false,
          itemStyle: {
            borderColor: "#c0f3fb",
            borderWidth: 4,
            areaColor: {
              image: null,
              repeat: "repeat"
            },
            opacity: 0.8
          }
        },
        nameProperty: "name",
        regions: mapData.value
      }
    ],
    series: [
      {
        // 动效散点公共配置项
        silent: false, // 暂不支持鼠标交互
        type: "effectScatter",
        coordinateSystem: "geo",
        rippleEffect: {
          //涟漪特效
          period: 8, //动画时间，值越小速度越快
          brushType: "fill", //波纹绘制方式 stroke, fill
          scale: 2.4 //波纹圆环最大限制，值越大波纹越大
        },
        label: {
          normal: {
            show: true,
            position: "right", //显示位置
            offset: [5, 0], //偏移设置
            formatter: function (params) {
              //圆环显示文字
              return params.data.name;
            },
            fontSize: 16,
            color: "#fff"
          },
          emphasis: {
            show: true
          }
        },
        symbol: "image://" + iconVppUser,
        symbolSize: 32,
        itemStyle: {
          normal: {
            show: false,
            borderWidth: 1,
            color: "rgba(255, 86, 11, 1)"
          }
        },
        data: []
      }
    ]
  });
  const geoDatas = ref([
    {
      data: mapData.value,
      geoJson: shandong,
      value: {
        name: "山东省",
        value: 370000
      }
    }
  ]);
  const activeFirstIndex = ref(0);
  const onePieOptions = ref({
    color: colors,
    tooltip: {
      trigger: "item"
    },
    legend: {
      type: "scroll",
      orient: "vertical",
      right: "1%",
      top: "center",
      textStyle: {
        color: "#fff"
      }
    },
    series: [
      {
        name: "行业类型占比",
        type: "pie",
        // radius: ["30%", "50%"],
        center: ["30%", "53%"],
        avoidLabelOverlap: false,
        padAngle: 5,
        // itemStyle: {
        //   borderRadius: 10
        // },
        label: {
          show: true,
          textStyle: {
            color: "#fff"
          }
        },
        emphasis: {
          label: {
            show: false,
            fontSize: 40,
            fontWeight: "bold"
          }
        },
        labelLine: {
          show: true
        },
        data: [
          { value: 1048, name: "工业企业园区" },
          { value: 735, name: "社区" },
          { value: 292, name: "新能源电池" }
        ]
      }
    ]
  });
  const twoPieOptions = ref({
    color: colors,
    tooltip: {
      trigger: "item"
    },
    legend: {
      type: "scroll",
      orient: "vertical",
      right: "10%",
      top: "center",
      textStyle: {
        color: "#fff"
      }
    },
    series: [
      {
        name: "设备类型占比",
        type: "pie",
        // radius: ["30%", "50%"],
        center: ["30%", "53%"],
        avoidLabelOverlap: false,
        padAngle: 5,
        // itemStyle: {
        //   borderRadius: 10
        // },
        label: {
          show: true,
          textStyle: {
            color: "#fff"
          }
        },
        emphasis: {
          label: {
            show: false,
            fontSize: 40,
            fontWeight: "bold"
          }
        },
        labelLine: {
          show: true
        },
        data: [
          { value: 440, name: "制冷设备" },
          { value: 541, name: "取暖设备" },
          { value: 580, name: "新能源充电桩" }
        ]
      }
    ]
  });
  const rightOneOptions = ref({
    color: colors,
    dataZoom: [
      {
        show: true,
        type: "inside",
        start: 50,
        end: 100
      }
    ],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross"
      }
    },
    grid: {
      top: 30,
      right: 35,
      bottom: 20
    },
    legend: {
      textStyle: {
        color: "#fff"
      },
      data: ["电量", "电价"]
    },
    xAxis: [
      {
        type: "category",
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          color: "#fff"
        },
        // prettier-ignore
        data: Array(12)
          .fill(null)
          .map((_, i) => {
            return `${i > 8 ? (i + 1) : "0" + (i + 1)}月`;
          })
      }
    ],
    yAxis: [
      {
        type: "value",
        name: "电量",
        position: "right",
        alignTicks: true,
        axisLine: {
          show: true,
          lineStyle: {
            color: colors[0]
          }
        },
        axisLabel: {
          color: "#fff"
        }
      },
      {
        type: "value",
        name: "电价",
        position: "left",
        alignTicks: true,
        axisLine: {
          show: true,
          lineStyle: {
            color: colors[0]
          }
        },
        axisLabel: {
          color: "#fff"
        }
      }
    ],
    series: [
      {
        name: "电量",
        type: "bar",
        itemStyle: {
          borderRadius: [4, 4, 0, 0],
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#00ffff"
              },
              {
                offset: 1,
                color: "#0056ff"
              }
            ],
            global: false // 缺省为 false
          }
        },
        data: Array(12)
          .fill(null)
          .map(() => {
            return Math.random().toFixed(2);
          })
      },
      {
        name: "电价",
        type: "line",
        smooth: true,
        showSymbol: false,
        lineStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#0056ff" // 100% 处的颜色
              },
              {
                offset: 0.5,
                color: "#00ffff" // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#0056ff" // 0% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        },
        yAxisIndex: 1,
        data: Array(12)
          .fill(null)
          .map(() => {
            return Math.random().toFixed(2);
          })
      }
    ]
  });
  const leftThreeOptions = ref({
    color: colors,
    dataZoom: [
      {
        show: true,
        type: "inside",
        start: 0,
        end: 100
      }
    ],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross"
      }
    },
    grid: {
      top: 30,
      bottom: 20
    },
    legend: {
      show: false,
      textStyle: {
        color: "#fff"
      }
    },
    xAxis: [
      {
        type: "category",
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          color: "#fff"
        },
        // prettier-ignore
        data: Array(24)
          .fill(null)
          .map((_, i) => {
            return `${i > 9 ? i : "0" + i}:00:00`;
          })
      }
    ],
    yAxis: [
      {
        type: "value",
        alignTicks: true,
        axisLine: {
          show: true,
          lineStyle: {
            color: colors[0]
          }
        },
        axisLabel: {
          color: "#fff"
        }
      }
    ],
    series: [
      {
        name: "实际调控",
        type: "line",
        smooth: true,
        showSymbol: false,
        lineStyle: {
          type: "solid",
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#00ffff"
              },
              {
                offset: 1,
                color: "#0056ff"
              }
            ],
            global: false // 缺省为 false
          }
        },
        data: Array(24)
          .fill(null)
          .map((_, i) => {
            if (i > 12) {
              return null;
            } else {
              if (i === 12) {
                return 0.56;
              }
              return Math.random().toFixed(2);
            }
          })
      },
      {
        name: "预测调控",
        type: "line",
        lineStyle: {
          type: "dashed",
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#00ffff"
              },
              {
                offset: 1,
                color: "#0056ff"
              }
            ],
            global: false // 缺省为 false
          }
        },
        smooth: true,
        showSymbol: false,
        data: Array(24)
          .fill(null)
          .map((_, i) => {
            if (i < 12) {
              return null;
            } else {
              if (i === 12) {
                return 0.56;
              }
              return Math.random().toFixed(2);
            }
          })
      }
    ]
  });
  const topFiveData = ref([
    {
      id: 1,
      name: "代理用户A代理用户A代理用户A代理用户A代理用户A",
      progress: 50
    },
    {
      id: 2,
      name: "代理用户B",
      progress: 44
    },
    {
      id: 3,
      name: "代理用户C",
      progress: 32
    },
    {
      id: 4,
      name: "代理用户D",
      progress: 22
    },
    {
      id: 5,
      name: "代理用户E",
      progress: 10
    }
  ]);
  const fourChartData = ref([
    {
      name: "接入用户",
      smallBg: "ys-bg1",
      bg: "bg1",
      value: 0,
      key: "userCount",
      percent: "80",
      upOrDown: "up"
    },
    {
      name: "总功率(kW)",
      smallBg: "ys-bg2",
      bg: "bg2",
      value: 0,
      key: "totalP",
      percent: "80",
      upOrDown: "up"
    },
    {
      name: "总上调容量(kW)",
      smallBg: "ys-bg3",
      bg: "bg3",
      value: 0,
      key: "totalMaxUpCap",
      percent: "80",
      upOrDown: "up"
    },
    {
      name: "总下调容量(kW)",
      smallBg: "ys-bg4",
      bg: "bg4",
      value: 0,
      key: "totalMaxDownCap",
      percent: "80",
      upOrDown: "up"
    }
  ]);
  const getRowData = async () => {
    let data = await getHomeFirstRowValue();
    fourChartData.value.forEach(item => {
      item.value = data[item.key] || 0;
    });
  };
  getRowData();
  const allUser = ref([]);
  const getAllUserVpp = async () => {
    let data = await getHomeVppUserList();
    allUser.value = data;
    MapOptions.value.series[0].data = data.map(i => {
      return {
        name: i.name,
        value: [i.longitude, i.latitude, i.id]
      };
    });
  };
  getAllUserVpp();
  const userMoneys = ref([
    {
      id: "1",
      name: "VPP用户A",
      value: 100005485
    },
    {
      id: "2",
      name: "VPP用户B",
      value: 10000548
    },
    {
      id: "3",
      name: "VPP用户C",
      value: 1000054
    },
    {
      id: "4",
      name: "VPP用户D",
      value: 100005
    },
    {
      id: "5",
      name: "VPP用户E",
      value: 10000
    }
  ]);
  return {
    userMoneys,
    fourChartData,
    title,
    oneOptions,
    MapOptions,
    geoDatas,
    mapData,
    level,
    rightTwoOptions,
    activeFirstIndex,
    twoPieOptions,
    onePieOptions,
    rightOneOptions,
    leftThreeOptions,
    topFiveData
  };
}
